import { FC, useState } from 'react';
import { Card, Button, Space, notification } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import CardSpace from '../components/CardSpace';

// 公共类函数，高阶组件，自定义hooks，组件（ui组件的二次封装，自定义组件的封装）
const Buttons: FC = () => {
  const [loading, set_loading] = useState<boolean>(false);

  const handleClick = () => {
    set_loading(true);
    // 请求数据
    setTimeout(() => {
      set_loading(false);
    }, 2000);
  };

  const openNotificationWithIcon = (
    type: 'success' | 'info' | 'error' | 'warning',
  ) => {
    notification[type]({
      message: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    });
  };

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <CardSpace title="基础按钮">
        <Button type="primary" size="large">
          Primary Button
        </Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="primary" danger>
          Primary
        </Button>
        <Button type="dashed" danger>
          Dashed
        </Button>
        <Button type="primary" disabled>
          Primary(disabled)
        </Button>
      </CardSpace>

      <Card title="图形按钮">
        <Space>
          <Button type="primary" icon={<PlusOutlined />}>
            添加
          </Button>
        </Space>
      </Card>

      <CardSpace title="loading">
        <Button type="primary" loading={loading} onClick={handleClick}>
          Loading
        </Button>
      </CardSpace>

      <CardSpace title="全局通知">
        <Button onClick={() => openNotificationWithIcon('success')}>
          Success
        </Button>
        <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
        <Button onClick={() => openNotificationWithIcon('warning')}>
          Warning
        </Button>
        <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
      </CardSpace>
    </Space>
  );
};

export default Buttons;
